<script>
import TheContent from './TheContent'
export default {
  name: 'TheTabs',
  components: {
    TheContent
  },
  data () {
    return {
      pans: []
    }
  },
  props: {
    currentIndex: {
      type: [String, Number],
      default: '1'
    }
  },
  methods: {
    changeIndex (index) {
      this.$emit('event', index)
    }
  },
  render () {
    return (
        <div>
          <ul class='tabs'>{this.$slots.default}</ul>
            <the-content pans = {this.pans} />
        </div>
    )
  }
}
</script>

<style scoped>
.tabs{
    width: 100%;
    height: 40px;
    border-bottom:0.5px solid rgba(128, 128, 128, 0.145);
    display: flex;
}
</style>
